<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>浩然弟弟最棒</title>

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <style>

        @font-face {font-family: "iconfont";
            src: url('//at.alicdn.com/t/font_819344_7mzsn61vje8.eot?t=1537163630829'); /* IE9*/
            src: url('//at.alicdn.com/t/font_819344_7mzsn61vje8.eot?t=1537163630829#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUoAAsAAAAAB7wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8vUg6Y21hcAAAAYAAAABSAAABfn+l6u9nbHlmAAAB1AAAAWYAAAGwmhFlimhlYWQAAAM8AAAALwAAADYSqgjyaGhlYQAAA2wAAAAcAAAAJAfeA4NobXR4AAADiAAAAAgAAAAICAAAAGxvY2EAAAOQAAAABgAAAAYA2AAAbWF4cAAAA5gAAAAgAAAAIAESAJluYW1lAAADuAAAAUUAAAJtPlT+fXBvc3QAAAUAAAAAJQAAADhyfE5geJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeuT/zYG7438AQw9zA0AAUZgTJAQDoUAxyeJztkLENgEAMAy98oECMQUHBHlBSsX/FGo+TMAaWzpJPqQKMQBO7cLAbI3LJWvrGnN5Z88bDP2fv6iNa27PlbeLPkr19a4g/FfW5AnsBhg8M+QAAeJwdT8FKw0AQ3ZnNbjbZbnel6SYUqVBJemhpodaKF/sDCn5LENqzXr3pn9RDPHnwR4RIrvoDiY4OA+/NzHszDJOM/Xzwd37JJuyW3bF79sAeGRPTwoIstrBZQrEhoFydgD+BMdCAmBSTBWxhvYQFXBFZbQlWJEjO0jFKEg1T30eyEx1MhiG1CnmWeio9baMVm/Pp34UinBZLWPNi+n9pDH/mi9OE5utiIvG71rrue5iDqmJlu54sw+OwFKazKq4inIPvdN/HfAZVJNWg1yGUYjhKZIk/vYGSUQUzjIaZrhHr+IuX2neIWFlyCPhMkhrEnLsKELo0Ll+1DET4HFolwifxlqapSYzaC7GXzrZGvegRz1E3xjQacz7SL6rXWeecNy3CIcoyhzk22hjdEHFZFh0AW+Mtyh3ATvAFNkmQQ3g48i0EsI/jPUGbugNIyIOkwfYS6NXghgfWBdd8ZyhiY9gvp3pJZwAAeJxjYGRgYADiJdduOsTz23xl4GZhAIHrR5PyEPT/BywMzJZALgcDE0gUAE8PC0UAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAADYAAAAAQAAAAIAjQAGAAAAAAACAAAACgAKAAAA/wAAAAAAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgS8zOT8vLT+vRBdEGDEwAAA5bwWaAAAA') format('woff'),
            url('//at.alicdn.com/t/font_819344_7mzsn61vje8.ttf?t=1537163630829') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/font_819344_7mzsn61vje8.svg?t=1537163630829#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont {
            font-family:"iconfont" !important;
            font-size:16px;
            font-style:normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .iconfont-font2:before {
            content: "\e647";
            color: darkcyan;
            font-size: 100px;
        }

        .iconfont-font1:before {
            content: "\e648";
        }



        /*通用样式*/

        * {
            margin: 0;
            padding: 0;
        }
        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        section:nth-child(even) {
            background-color: #f7f7f7;
        }

        .section-layout {
            text-align: center;
            /*color: #ccc;*/
            padding-top: 130px;
            padding-bottom: 150px;
        }
        .section-layout>h2 {
            font-size: 4em;
            font-weight: bold;
            color: #666;
        }

        .section-layout>p {
            color: #ccc;
            margin-top: 10px;
        }



        /*首屏,header部分*/

        header {
            background-image: url("pic/lhr-header.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            opacity: 0.9;
            padding-bottom: 150px;

        }

        header .navbar {
            padding-top: 40px;
            padding-left: 20px;
            padding-right: 20px;
        }
        header .logo {
            float: left;
            font-size: 25px;
            color: #12443f;
        }
        header .menu {
            float: right;
            font-size: 18px;
        }
        header .menu li {
            float: left;
            display: inline-block;
        }
        header .menu a {
            padding: 10px;
            color: white;
            margin-left: 5px;
        }
        header .menu a:hover {
            color: #12443f;
        }
        header .intro {
            text-align: center;
            color: white;
            padding-top: 280px;
            line-height: 2;
        }

        header .intro h2 {
            font-size: 1.8em;
        }

        header .intro h3 {
            font-size: 2em;
        }
        header .intro a {
            background: #12443f;
            display: inline-block;
            padding: 10px 20px;
            border-radius: 5px;
            color: white;
            font-size: 18px;
            margin-top: 20px;
        }

        /*第二屏,个性*/

        .character {
            margin-top: 130px;
            padding-left: 15%;
            padding-right: 15%;
        }
        .character>li {
            display: inline-block;
            float: left;
            width: calc(100% / 3);
            box-sizing: border-box;
            padding-right: 40px;
        }

        .character h4 {
            font-size: 17px;
            margin-bottom: 10px;
            margin-top: 10px;
            color: #666;
        }


        .character>li p {
            font-size: 14px;
            color: #ccc;
        }

        /*第三屏,作品*/

        .production {
            padding-top: 80px;
            padding-left: 15%;
            padding-right: 15%;
        }
        .production>li {
            float: left;
            display: inline-block;
            width: calc(100% / 3 - 15px);
            box-sizing: border-box;
            margin-bottom: 30px;
            margin-left: 15px;
            font-size: 0px;
            position: relative;
        }
        .production>li a {
            display: block;
            position: relative;
        }
        .production>li img {
            width: 100%;
            height: 180px;
        }

        .production div {
            /*width: 85%;*/
            margin: 0 auto;
            background: white;
            font-size: 16px;
        }

        .production div>figcaption {
            color: #666;
            font-size: 18px;
            display: block;
            padding: 10px;
            padding-bottom: 0;
        }

        .production div>p {
            color: #ccc;
            font-size: 15px;
            padding-bottom: 20px;
        }


        .production .bubble::before {
            content: '';
            display: block;
            border: 40px solid yellow;
            border-bottom: 40px solid rgba(255,255,255,0);
            border-left: 40px solid rgba(255,255,255,0);
            position: absolute;
            right: 0;
            opacity: 0.8;
        }

        .production .bubble-text {
            display: block;
            color: #bf213b;
            position: absolute;
            font-size: 18px;
            z-index: 2;
            right: 0;
            top: 14px;
            transform: rotate(45deg);
        }


        /*第四屏,履历时间线*/
        .timeline {
            padding-top: 80px;
        }
        .timeline img {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            border: 8px solid #f1f1f1;
            box-sizing: border-box;
        }

        .timeline>li {
            position: relative;
            margin-bottom: 100px;
        }
        .timeline>li::before {
            content: '';
            display: block;
            width: 5px;
            height: 436px;
            background-color: lightblue;
            position: absolute;
            left: 50%;
            z-index: -1;
        }
        .timeline>li:last-child {
            margin-bottom: 0px;
        }
        .timeline>li:last-child::before {
            height: 0px;
        }
        .timeline>li::after {
            content: '';
            display: block;
            clear: both;
        }
        .timeline>li:nth-child(odd) img, .timeline>li:nth-child(odd) dl {
            float: right;
            margin-right: calc(50% - 125px);
        }
        .timeline>li:nth-child(even) img, .timeline>li:nth-child(even) dl {
            float: left;
            margin-left: calc(50% - 125px);
        }
        .timeline>li:nth-child(even) dl{
            text-align: left;
            width: 25%;
            margin-left: 60px;
        }
        .timeline>li:nth-child(odd) dl{
            text-align: right;
            width: 25%;
            margin-right: 60px;
        }


        .timeline .content{
            font-size: 20px;
            font-weight: bold;
            line-height: 2;

        }
        .timeline .content-detail {
            font-size: 13px;
            color: #666;
            line-height: 1.8;
        }
        .timeline .last-child {
            box-sizing: border-box;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background-color: #18d8c5;
            content: '';
            display: block;
            margin: 0 auto;
            border: 8px solid #f1f1f1;
        }

        .timeline .last-child::before {
            content: '';
            display: inline-block;
            /*width: 2px;*/
            height: 100%;
            /*background-color: red;*/
            vertical-align: middle;
        }

        .timeline .last-child>span {
            color: white;
            /*border: 1px solid red;*/
            font-size: 26px;
            vertical-align: middle;
        }


        /*第五屏,合作伙伴*/
        .friends {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 100px;
            padding-left: 5%;
            padding-right: 5%;
        }
        .friends img {
            width: 230px;
            height: 230px;
            border-radius: 50%;
            border: 7px solid white;
        }
        .friends figcaption {
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 10px;
            color: #666;
        }
        .friends li {
            margin: 0 auto;
        }
        .friends ol {
            display: flex;
            padding-left: 10%;
            padding-right: 10%;
        }
        .friends ol a {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #222;
            line-height: 40px;
        }
        .friends ol a:hover {
            background-color: #fed136;
        }
        .friends ol i {
            font-size: 20px;
            color: white;
        }

        .friends-description {
            padding-top: 50px;
            padding-left: 10%;
            padding-right: 10%;
            line-height: 1.8;
            font-size: 14px;
            color: #776868;
        }






        /*第六屏,页脚*/

        .banner ul {
            text-align: center;
        }

        .banner li {
            display: inline-block;
            padding: 60px 10px;
        }

        .contact {
            background-image: url(pic/map-image.png);
            background-color: #222;
            /*height: 800px;*/
            background-repeat: no-repeat;
            background-position: center;
            text-align: center;
            color: white;
            overflow: hidden;
            padding-right: 10%;
            padding-left: 10%;
            padding-top: 10%;
        }

        .contact .row>h2 {
            font-size: 2em;
            margin-bottom: 10px;
        }
        .contact .row p {
            color: #ccc;
            margin-bottom: 60px;
        }
        .contact .row form {
            display: flex;

        }

        .contact .form-col {
            width: 50%;
            padding-left: 3%;
            height: 250px;
        }
        .contact .form-control {
            height: calc(100% / 3);
        }
        .contact .form-col input{
            display: block;
            width: 100%;
            height: calc(100% - 20px);
            border: none;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
            padding-left: 30px;
            color: #777979;
            font-size: 14px;
        }
        .contact .form-col textarea {
            width: 100%;
            height: calc(100% - 20px);
            border: none;
            border-radius: 4px;
            padding: 20px;
            box-sizing: border-box;
            margin-bottom: -20px;
            color: #777979;
            font-size: 14px;
        }
        .contact .submit {
            padding-top: 10px;
        }
        .contact .submit>input {
            display: inline-block;
            width: 200px;
            border: none;
            height: 50px;
            font-size: 18px;
            color: white;
            background: #fed136;
            border-radius: 5px;
            cursor: pointer;
        }
        .contact .submit>input:hover {
            opacity: 0.8;
        }

        .copyright {
            text-align: center;
            padding-left: 10%;
            padding-right: 10%;
            display: flex;
            align-items: center;
        }
        .copy,
        .copy-icon,
        .policy {
            width: calc(100% / 3);
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .copyright .copy-icon a {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #222;
            line-height: 40px;
            margin-right: 15px;
        }

        .copyright .copy-icon a:hover {
            background: #fed136;
        }


        .copyright .copy-icon i {
            font-size: 18px;
            color: white;
        }

        .policy a {
            color: #fed136;
            margin-right: 10px;
        }
        .policy a:hover {
            text-decoration: underline;
        }


        .fade {
            display: none;
        }



        /*
        响应式
        屏幕宽度小于985px时触发
        */
        /*@media screen and (max-width: 985px) {*/
            /*!**/
            /*第一屏*/
            /*1. 修改背景图片的大小、位置*/
            /*2. 修改菜单样式，改成弹出框*/
            /**!*/
            /*.fade {*/
                /*display: unset;*/
            /*}*/
            /*header {*/
                /*background-position: center;*/
                /*background-size: auto;*/
            /*}*/
            /*!*隐藏原有导航菜单*!*/
            /*.navbar .menu {*/
                /*display: none;*/
            /*}*/
            /*.navbar .menu-btn {*/
                /*float: right;*/
                /*position: relative;*/
                /*font-size: 2em;*/
            /*}*/
            /*.menu-btn>a {*/
                /*color: #12443f;*/
            /*}*/
            /*.child a{*/
                /*color: white;*/
            /*}*/

            /*.menu-btn>a:hover .child a{*/
                /*color: yellow;*/
            /*}*/

        /*}*/









    </style>
</head>
<body>

    <header>
        <nav class="navbar clearfix">
            <h1 class="logo">刘昊然——少年应如是</h1>
            <div class="menu-btn fade">
                <a href=""><i class="fa fa-bars"></i></a>
                <ul class="child">
                    <li><a id="test" href="">简介</a></li>
                    <li><a href="">作品</a></li>
                    <li><a href="">履历</a></li>
                    <li><a href="">微博</a></li>
                    <li><a href="">作者</a></li>
                </ul>
            </div>
            <ul class="menu">
                <li><a href="">简介</a></li>
                <li><a href="">作品</a></li>
                <li><a href="">履历</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">作者</a></li>
            </ul>
        </nav>
        <div class="intro">
            <h2>安奈毁誉 八风不动</h2>
            <h3>未来能走向哪个方向 我希望是自己决定的 </h3>
            <a href="">最好的刘昊然</a>
        </div>
    </header>
    <main>
        <section id="character" class="section-layout">
            <h2>个性</h2>
            <p>扑面而来的少年气质</p>
            <ul class="character clearfix">
                <li><span class="iconfont iconfont-font2"></span>
                    <h4>97年的男孩儿</h4>
                    <p>刘昊然，本名刘源。1997年10月10日出生于河南省平顶山市，中国内地男演员，就读于中央戏剧学院表演系本科。</p>
                </li>
                <li><span class="iconfont iconfont-font2"></span>
                    <h4>小虎牙</h4>
                    <p>从《北京爱情故事》里的宋歌
                        到《最好的我们》中的余淮，
                        刘昊然和他的小虎牙已经成了少年感的代名词～</p>
                </li>
                <li><span class="iconfont iconfont-font2"></span>
                    <h4>钢铁直男</h4>
                    <p>"我就不能像个人了是吗？...不怪阿姨，阿姨把你生晚点也嫁不了...缺女朋友吗？不缺。"来自四大钢铁直男之一的吐槽</p>
                </li>
            </ul>
        </section>
        <section id="production" class="section-layout">
            <h2>作品</h2>
            <p>满满的好口碑溢出屏幕</p>
            <ul class="production clearfix">
                <li>
                    <figure>
                        <a href=""><img src="pic/lhr-tv-1.jpg" alt=""></a>
                        <div>
                            <figcaption>北京爱情故事</figcaption>
                            <p>最年轻cp</p>
                        </div>

                    </figure>
                </li>
                <li>
                    <figure>
                        <a href=""><img src="pic/lhr-tv-2.jpg" alt=""></a>
                        <div>
                            <figcaption>唐人街探案</figcaption>
                            <p>天才结巴侦探</p>
                        </div>

                    </figure>
                </li>
                <li>
                    <figure>
                        <a href=""><img src="pic/lhr-tv-3.jpeg" alt=""></a>
                        <div>
                            <figcaption>最好的我们</figcaption>
                            <p>耿耿和余怀</p>
                        </div>

                    </figure>
                </li>
                <li>
                    <figure>
                        <a href=""><img src="pic/lhr-tv-4.jpg" alt=""></a>
                        <div>
                            <figcaption>妖猫传</figcaption>
                            <p>永远的白鹤少年</p>
                        </div>

                    </figure>
                </li>
                <li>
                    <figure>
                        <a href=""><img src="pic/lhr-tv-5.jpg" alt=""></a>
                        <div>
                            <figcaption>琅琊榜2</figcaption>
                            <p>少年将军萧平旌</p>
                        </div>

                    </figure>
                </li>
                <li>
                    <figure >
                        <span class="bubble-text">未上映</span>
                        <a class="bubble" href=""><img src="pic/lhr-tv-6.jpg" alt=""></a>
                        <div>
                            <figcaption>九州·缥缈录</figcaption>
                            <p>我是吕归尘·阿苏勒·帕苏尔</p>
                        </div>

                    </figure>
                </li>
                <!--<li>-->
                    <!--<figure>-->
                        <!--<a href=""><img src="pic/lhr-tv-6.jpg" alt=""></a>-->
                        <!--<figcaption>高能少年团</figcaption>-->
                        <!--<p>颜值体力智商担当</p>-->
                    <!--</figure>-->
                <!--</li>-->
            </ul>
        </section>
        <section class="section-layout">
            <h2>履历</h2>
            <p>虽然我很年轻，但是我的履历厚重</p>
            <ul class="timeline">
                <li>
                    <img class="verical-line" src="pic/lhr-tv-1.jpg" alt="">
                    <dl class="content">
                        <dt>2008.7</dt>
                        <dd>北京爱情故事</dd>
                        <dd class="content-detail">《北京爱情故事》是一部由陈思诚执导，梁家辉、刘嘉玲、王学兵等主演的剧情片，于2014年2月14日在中国上映。
                            影片讲述了一个人一生的爱的寓言，全年龄段、全方位的展现爱情的故事。</dd>
                    </dl>
                </li>
                <li>
                    <img src="pic/lhr-tv-2.jpg" alt="">
                    <dl class="content">
                        <dt>2009.3</dt>
                        <dd>唐人街探案</dd>
                        <dd class="content-detail">《唐人街探案》是一部由陈思诚执导，王宝强、佟丽娅、刘昊然等主演的喜剧悬疑电影。于2015年12月31日在中国大陆上映。
                            该片讲述了唐仁、秦风必须在躲避警察追捕、匪帮追杀、黑帮围剿的同时，在短短“七天”内，完成找到“失落的黄金”、查明“真凶”、为自己“洗清罪名”这些“逆天”的任务的故事。
                            2016年张世杰凭借《唐人街探案》在第53届金马奖获得最佳造型设计奖，伍刚凭借《唐人街探案》在第53届金马奖获得动作设计奖。</dd>
                    </dl>
                </li>
                <li>
                    <img src="pic/lhr-tv-3.jpeg" alt="">
                    <dl class="content">
                        <dt>2010.2</dt>
                        <dd>最好的我们</dd>
                        <dd class="content-detail">《最好的我们》是一部校园青春剧，由刘畅执导，李嘉编剧，刘昊然、谭松韵、王栎鑫、董晴等主演。该剧讲述了平凡的高中生耿耿和同桌余淮各自成长过程中的故事。
                            该剧于2016年4月8日在爱奇艺首播，2018年4月10日在浙江卫视播出。</dd>
                    </dl>
                </li>
                <li>
                    <img src="pic/lhr-tv-4.jpg" alt="">
                    <dl class="content">
                        <dt>2011.5</dt>
                        <dd>妖猫传</dd>
                        <dd class="content-detail">《妖猫传》是一部由陈凯歌执导，黄轩、染谷将太、张雨绮等主演的爱情、奇幻、悬疑类型的电影，于2017年12月22日在中国上映，2018年2月24日在日本上映。
                            该片讲述了一只口吐人语的妖猫搅动长安城，诗人白乐天与僧人空海联手探查，令一段被人刻意掩埋的真相浮出水面的故事。
                            2018年9月，该片入围第六届十大优秀华语电影。</dd>
                    </dl>
                </li>
                <li>
                    <img src="pic/lhr-tv-5.jpg" alt="">
                    <dl class="content">
                        <dt>2012.7</dt>
                        <dd>琅琊榜2</dd>
                        <dd class="content-detail">琅琊榜之风起长林》是正午阳光影业、北京爱奇艺科技有限公司联合出品的一部古装权谋电视剧。由孔笙、李雪执导，海晏担任编剧，黄晓明、刘昊然、佟丽娅、张慧雯、吴昊宸、孙淳、梅婷、张博主演，于2017年12月18日起每周一至周三在东方卫视、北京卫视播出。2018年1月12日登陆北京卫视黄金档日播剧场。
                            该剧讲述了在琅琊阁学艺的萧平旌，调查其兄长林军副帅萧平章一案而牵扯到大梁安危的故事。</dd>
                    </dl>
                </li>
                <li>
                    <img src="pic/lhr-tv-6.jpg" alt="">
                    <dl class="content">
                        <dt>2013.4</dt>
                        <dd>九州缥缈录</dd>
                        <dd class="content-detail">《九州缥缈录》由柠萌影业、灵龙文化、大神圈等出品，张晓波执导，江南编剧，由刘昊然、宋祖儿、陈若轩、张志坚、李光洁、许晴、江疏影、王鸥等人主演的英雄史诗剧。
                            该剧改编自江南同名小说，以虚拟的“九州”世界为背景，以主角吕归尘、姬野、羽然等人的成长为主线，讲述在群雄并立的时代中，少年英雄成长、崛起、坚守信义的故事。
                            该剧于2019年播出</dd>
                    </dl>
                </li>
                <li>
                    <div class="last-child">
                        <span>浩然弟弟冲鸭</span>
                    </div>
                </li>
            </ul>
        </section>
        <section class="section-layout">
            <h2>好友</h2>
            <p>是合作伙伴，也是飙戏对手</p>
            <ul class="friends" >
                <li>
                    <figure><img src="pic/oynn.jpg" alt="">
                        <figcaption>欧阳娜娜</figcaption>
                    </figure>
                    <ol>
                        <li>
                            <a href=""><i class="fa fa-weibo"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-weixin"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-instagram"></i></a>
                        </li>
                    </ol>
                </li>
                <li>
                    <figure><img src="pic/wbq.jpg" alt="">
                        <figcaption>王宝强</figcaption>
                    </figure>
                    <ol>
                        <li>
                            <a href=""><i class="fa fa-weibo"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-weixin"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-instagram"></i></a>
                        </li>

                    </ol>
                </li>
                <li>
                    <figure><img src="pic/tsy.jpeg" alt="">
                        <figcaption>谭松韵</figcaption>
                    </figure>
                    <ol>
                        <li>
                            <a href=""><i class="fa fa-weibo"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-weixin"></i></a>
                        </li>
                        <li >
                            <a href=""><i class="fa fa-instagram"></i></a>
                        </li>
                    </ol>
                </li>
            </ul>
            <div class="friends-description">
                <p>从《北京爱情故事》和欧阳娜娜合作，到《唐人街探案》和王宝强上演侦探历险，再到网剧
                    《最好的我们》遇见谭松韵饰演的耿耿，一路走来，刘昊然始终每一步都稳扎稳打，未来可期。</p>
            </div>
        </section>
    </main>
    <footer>
        <div class="banner">
            <ul>
                <li>
                    <a href=""><img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/envato.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/designmodo.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/themeforest.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/logos/creative-market.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <div class="contact section-layout">
            <div class="row">
                <h2>联系作者</h2>
                <p>需要修改关于浩然弟弟的描述，或者对页面有新的建议和想法请联系作者</p>
            </div>
            <div class="row">
                <form>
                    <div class="form-col">
                        <div class="form-control">
                        <input name="username" type="text" placeholder="你的名字...">
                        </div>
                        <div class="form-control">
                            <input name="email" type="text" placeholder="联系邮箱...">
                        </div>
                        <div class="form-control">
                            <input name="phone" type="text" placeholder="你的手机...">
                        </div>
                    </div>
                    <div class="form-col">
                        <textarea class="form-control" name="message" cols="30" rows="10">留下你的建议...</textarea>
                    </div>
                    <!--<button value="点击发送"></button>-->
                </form>
                <div class="submit">
                    <input type="submit" value="点击发送">
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="copy">
                <span>Copyright © Ling Website 2018</span>
            </div>
            <div class="copy-icon">
                <a href=""><i class="fa fa-weibo"></i></a>
                <a href=""><i class="fa fa-weixin"></i></a>
                <a href=""><i class="fa fa-instagram"></i></a>
            </div>
            <div class="policy">
                <a href="">Privacy Policy</a>
                <a href="">Terms of Use</a>
            </div>
        </div>
    </footer>

</body>
</html>